<template>
	<view class="content padding">
		<goods-list :list="goodsList"></goods-list>
		<!-- 顶部搜索框 -->
		<view class="sousuobox  flexleft">
			<view class="search margin_right2"></view>
			<input class="inputs" type="text" v-model="keyword" placeholder="请输入你要搜索的内容" confirm-type="search"
				@confirm="goGoodList('',keyword)">
		</view>
		<!-- VIP专区 -->
		<!-- <view class=" flexbetween " style="margin-top: 58rpx;">
			<view class="flexleft">
				<view class="ggline margin_right2"></view>
				<view class="text_weight">VIP专区</view>
			</view>

			<view class="flexleft">
				<view class="text_five darkblue_size" v-show="Colortype==2">查看更多</view>
				<view class="text_five reds" v-show="Colortype==0">查看更多</view>
				<view class="text_five green_size" v-show="Colortype==1">查看更多</view>
				<view class="text_five blue_size" v-show="Colortype==3">查看更多</view>
				<view class="icon" v-show="Colortype==0"></view>
				<view class="green_icon icon_s" v-show="Colortype==1"></view>
				<view class="sheng_icon icon_s" v-show="Colortype==3"> </view>
				<view class="blue_icon icon_s" v-show="Colortype==3"></view>
			</view>
		</view> -->
		<view class="flexbetween flex_wrap" style="margin-bottom: 100rpx;">
			<view class="shangpbox margin_top" v-for="item in vipGoodsList.data" :key="item.id"
				@click="goVipGoodsInfo(item)">
				<view class="shangptp">
					<image :src="item.image_text" mode=""></image>
				</view>
				<view class="padding15 ffffff baibox">
					<view class="text_e  text_three">{{item.title}}</view>
					<view class="flexbetween margin_top5">
						<view class="text_c reds" v-show="Colortype==0">￥{{item.price}}</view>
						<!-- 后台指定不同的颜色-->
						<view class="text_c darkblue_size" v-show="Colortype==2">￥{{item.price}}</view>
						<view class="text_c green_size" v-show="Colortype==1">￥{{item.price}}</view>
						<view class="text_c blue_size" v-show="Colortype==3">￥{{item.price}}</view>
					</view>
				</view>
			</view>
			<view class="flexcenter margin_top" v-if="!vipGoodsList.data.length">
				<image src="https://socialmall.yuntaiqikeji.com/uploads/20230606/ad764c5d1a730e55e1efb5d6f14c8b05.png"
					mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import goodsList from "@/components/goodList.vue"
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				page: 1,
				limit: 12,
				keyword: "",
				sales_status: 0, //销量排序 0不排序 1降序 2升序
				price_status: 0, //价格排序 0不排序 1降序 2升序
				zh_status: 0, //综合排序 0不排序 1排序
				Colortype: 0, //0=褐色,1=绿色,2=深蓝,3=浅蓝
				is_login: false,
				vipGoodsList: {
					data: []
				}, //vip商品
			}
		},
		components: {
			goodsList
		},
		onLoad() {
			this.Colortype = this.$store.state.type
			uni.hideTabBar()
			this.getVipGoods()
		},
		onShareAppMessage: function(options) {
			return {
				title: '工蜂商城',
				imageUrl: '@/static/logo.png',
				path: "pages/index/index?rec_uid=" + uni.getStorageSync("user_id"),
			}
		},
		onShareTimeline: function() {
			return {
				title: '工蜂商城',
				imageUrl: '@/static/logo.png',
				path: "pages/index/index?rec_uid=" + uni.getStorageSync("user_id"),
			}
		},
		onShow() {
			// this.is_login = httpRequest.checkIsLogin();
			// if (this.is_login) {
			// 	this.gwclb()
			// }else{
			// }

		},
		methods: {
			getVipGoods(isPage, page) { //获取vip商品
				let _this = this
				httpRequest.request('/api/goods/vipGoodsList', 'GET', {
					page: page || 1,
					limit: _this.limit,
					keyword: _this.keyword,
					sales_status: _this.sales_status,
					price_status: _this.price_status,
					zh_status: _this.zh_status
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.vipGoodsList;
						if (isPage == true) {
							_this.vipGoodsList.data = dataList.data.concat(resList.data);
						} else {
							this.vipGoodsList = res.data
							_this.vipGoodsList.data = resList.data;
						}
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.vipGoodsList;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getVipGoods(true, page);
			},
			goVipGoodsInfo(item) {
				uni.navigateToMiniProgram({
					// appid  写你要跳转的小程序的 appid
					appId: item.wechat_appid,
					// 路径写  src下的路径,假如你跳转的是pages下的页面,就可以写pages/index
					path: item.wechat_path,
					extraData: {
						// 'type': 'out'
					},
					// 这个不写的话会显示开发环境,不能正常跳转,写上就能正常跳转了
					envVersion: 'release',
					success(res) {
						// 打开成功
						console.log("跳转成功");
						// uni.showToast({
						// 	title: '跳转成功'
						// })
					},
					fail(err) {
						// 打开失败/取消
						console.log("跳转不成功");
						// uni.showToast({
						// 	title: '跳转不成功'
						// })
					}
				})
			},
			goGoodList(id, text) { //商品列表
				if (!text) {
					text = ""
				}
				uni.navigateTo({
					url: "/pages_index/shangpinlbVip?id=" + id + "&keyWords=" + text
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.inputs {
		width: 90%;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.sousuobox {
		width: 90%;
		background: #F3F3F3;
		padding: 20rpx 40rpx;
		border-radius: 60rpx;
	}

	.ggline {
		width: 8rpx;
		height: 35rpx;
		background-color: rgba(212, 139, 57, 1);
		border-radius: 23rpx 23rpx 23rpx 23rpx;
	}

	// 商品列表样式
	.shangpbox {
		width: 49%;
	}

	.shangptp {
		width: 338rpx;
		border-radius: 11rpx 11rpx 0 0;
		height: 338rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 11rpx 11rpx 0 0;
		}
	}

	.baibox {
		border-radius: 0 0 11rpx 11rpx;
	}
</style>